class Observer {
    constructor(data){
        this.observe(data)
    }
    observe(data){//data
        //    要对这个data数据将原有的属性改成get和set的形式
        if(!data||typeof data!=='object'){
            return;
        }
        //    要将数据--劫持 先获取data的key和value
        Object.keys(data).forEach(key=>{
            //    劫持
            this.defineReactive(data,key,data[key]);
            this.observe(data[key]);//深度劫持
        })
    }
    defineReactive(obj,key,value){
        //获取某个值
        let that=this;
        let dep=new Dep();//每个变化的数据 都会对应一个数组，这个数组是存放所有更新的操作
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){//当取值时对应的方法
                //------关联第二步
                Dep.target&&dep.addSub(Dep.target);
                return value;
            },
            set(newValue){//给data属性中设置新的值的时候 更改获取的属性的值
                if(newValue!=value){
                    // alert('调用set-------->'+JSON.stringify(newValue));
                    //这里的this不是实例
                    that.observe(newValue);//如果是对象 就继续劫持
                    value=newValue;
                    //------关联第四步
                    dep.notify();//通知所有的 数据更新了
                }
            }
        })
    }

}
//发布订阅
class Dep{
    constructor(){
        //    订阅的数组
        this.subs=[];
    }
    addSub(watcher){
        this.subs.push(watcher)
    }
    notify(){
        this.subs.forEach(watcher=>watcher.update());
    }
}
